<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
.x{
text-align: center;
width: 100px;
height: 30px;
}
  </style>
</head>
<body>
  <table border cellsapcing="0">
    <thead>
    <tr>
     
    <th>新闻唯一ID</th>
    <th>发布时间</th>
    <th>文章标题</th>
    <th>文章描述</th>
    <th>文章来源</th>
    <th>封面图片</th>
    </tr>
    <thead>
      <tbody>
      </tbody>
    </table>
    </div>
  <span></span>
  <script src="../jquery/jquery-1.12.4.min.js"></script>
  <script>
// 接口文档    服务端给前端使用的
// 接口 URl地址
// 请求方法 GET POST
// 请求参数
// 名称 类型 必填

var page1 = 1;
var numq = 10;
var numq1 = 10;

var fun = function (numq,page1) {
  // $("tbody").remove()
  $("tbody").html('')
  $.ajax({
  url: 'https://apis.tianapi.com/esports/index',
  method : "GET",
  // 给服务端的数据
  data : {
    key : '6c65d64588b512789e285c57f88e6995',
    num : numq,
    page : page1,
  },
  success : function (res) {
    var newslist = res.result.newslist;
    console.log(newslist.length);
    for (var i = 0; i < newslist.length; i++) {
          var news = newslist[i];
          var $tr = $("<tr></tr>");
          for (var key in news) {
            if (key === "picUrl") {
              var $td = $("<td></td>");
              if (news[key].indexOf("https://") === -1) {
                var $imgs = $("<img src='https://"+news[key]+"''>")
                $td.html($imgs)
                $tr.append($td);
              }else{
                var $imgs = $("<img src='"+news[key]+"''>")
                $td.html($imgs)
                $tr.append($td);
              }
              // $imgs.arrtr("src","picUrl")
            }else if (key === "url"){
              continue;
            }else{
              var $td = $("<td></td>");
              $td.text(news[key]);
              $tr.append($td);
            }      
          }
          $("tbody").append($tr)
        }
    return newslist.length
  },
  error : function (err) {
    console.log(err);
  }
});
}
fun(numq,page1)
var $div = $("<div></div>");
$("tbody").after($div);
var btb1 = $('<input type="button" value="">');
btb1.attr("value","上一页");
var btb2 = $('<input type="button" value="">');
btb2.attr("value","下一页");

var btb3 = $('<span></span>');
btb3.text(page1);
$div.append(btb1);
$div.append(btb3);
$div.append(btb2);
var $select = $('<select name="" id=""></select>');
var $option1 = $('<option value=""></option>');
var $option2 = $('<option value=""></option>');
var $option3 = $('<option value=""></option>');
var $option4 = $('<option value=""></option>');
var $option5 = $('<option value=""></option>');
$option1.attr("value","10条/页");
$option2.attr("value","20条/页");
$option3.attr("value","30条/页");
$option4.attr("value","40条/页");
$option5.attr("value","50条/页");
$option1.text("10条/页");
$option2.text("20条/页");
$option3.text("30条/页");
$option4.text("40条/页");
$option5.text("50条/页");
$div.append($select);
$select.append($option1);
$select.append($option2);
$select.append($option3);
$select.append($option4);
$select.append($option5);


btb2.click(function () {
  // $("tbody").remove()
 page1++;
 if (page1 > 5) {
  page1 = 1;
 }
fun(numq,page1)
btb3.text(page1);
})
btb1.click(function () {
  // $("tbody").remove()
  page1--;
 if (page1 < 1) {
  page1 = 5;
 }
 fun(numq,page1)
 btb3.text(page1);
})
$select.on('change', function() {
  console.dir($select.find("option:selected").text());
  var index = $select.find("option:selected").text();
  // 把 index 数据添加到 p 元素中
  if (index==="10条/页") {
    numq = 10
    fun(numq,page1)
  }else if(index==="20条/页"){
    numq = 20
    fun(numq,page1)
  }else if(index==="30条/页"){
    numq = 30
    fun(numq,page1)
  }else if(index==="40条/页"){
    numq = 40
    fun(numq,page1)
  }else if(index==="50条/页"){
    numq = 50
    fun(numq,page1)
  }
})


















// $select.click(function () {
//   if ($("option:selected").val()==="10条/页" && num11 !==10) {
//     $.ajax({
//         url: 'https://apis.tianapi.com/esports/index',
//         method: "GET",
//         // 给服务端的数据
//         data: {
//           key: '6c65d64588b512789e285c57f88e6995',
//           num: 10,
//           page: 1,
//         },
//         success: function name(res) {
//           fun(res)
//         },
//         error: function (err) {
//           console.log(err);
//         }
//       });
//       num11 =10
//   }else if($("option:selected").val()==="20条/页" && num11 !==20){
//     $.ajax({
//         url: 'https://apis.tianapi.com/esports/index',
//         method: "GET",
//         // 给服务端的数据
//         data: {
//           key: '6c65d64588b512789e285c57f88e6995',
//           num: 20,
//           page: 1,
//         },
//         success: function name(res) {
//           fun(res)
//         },
//         error: function (err) {
//           console.log(err);
//         }
//       });
//       num11 =20
//   }else if($("option:selected").val()==="30条/页" && num11 !==30){
//     $.ajax({
//         url: 'https://apis.tianapi.com/esports/index',
//         method: "GET",
//         // 给服务端的数据
//         data: {
//           key: '6c65d64588b512789e285c57f88e6995',
//           num: 30,
//           page: 1,
//         },
//         success: function name(res) {
//           fun(res)
//         },
//         error: function (err) {
//           console.log(err);
//         }
//       });
//       num11 =30
//   }else if($("option:selected").val()==="40条/页" && num11 !==40){
//     $.ajax({
//         url: 'https://apis.tianapi.com/esports/index',
//         method: "GET",
//         // 给服务端的数据
//         data: {
//           key: '6c65d64588b512789e285c57f88e6995',
//           num: 40,
//           page: 1,
//         },
//         success: function name(res) {
//           fun(res)
//         },
//         error: function (err) {
//           console.log(err);
//         }
//       });
//       num11 =40
//   }
//   else if($("option:selected").val()==="50条/页" && num11 !==50){
//     $.ajax({
//         url: 'https://apis.tianapi.com/esports/index',
//         method: "GET",
//         // 给服务端的数据
//         data: {
//           key: '6c65d64588b512789e285c57f88e6995',
//           num: 50,
//           page: 1,
//         },
//         success: function name(res) {
//           fun(res)
//         },
//         error: function (err) {
//           console.log(err);
//         }
//       });
//       num11 =50
//   }



//   if ($("option:selected").val()==="10条/页") {
    
//   }
// console.log($("option:selected").val());
// })

// AJAX的底层逻辑
// 通过html代码加载远程数据
// 返回其创建的xmlhttprequest（）对象


// 创建一个XMLHttpRequest 对象
// var xhr = new XMLHttpRequest();

// // 使用XMLHttpRequest 对象的open（）方法初始化一个请求
// // XMLHttpRequest.open(Method,url,[async,user,password])
// // method请求地址 通常是get post
// // url请求地址
// // 可选
// // xhr.open("GET","./cs.json")
// xhr.open("GET","./cs.txt")

// // 发送请求 参数可选 body（request body）
// xhr.send();

// // 监听xhr事件以获取响应
// // load请求完成
// // error无法完成请求
// xhr.onload = function (res) {
//   console.log(res);
//   console.log(xhr.status);
//   if (xhr.status !== 200) {
//     throw new Error ("http status code " + xhr.statue,xhr)
//   }else{
//     // 得到的是字符串
//     // json字符串转换为json
//         // JSON.parse（）
//     // json转换为json字符串
//       // JSON.stringif（）
//     console.log(xhr.response);
//     console.log(typeof xhr.response);
//     console.log(JSON.parse(xhr.response) );
//   }
// }

// 本地请求都是get
// content-type:application/x-www-form-urlencoded 表单提交格式
// content-type:application/josn  josn提交格式
// ajaxjq方法
// $.ajax({
//   url :"./cs.json",
//   method : "GET",
//   timeout : 10, //请求超时
//   // 成功后的回调
//   success : function (res) {
//     console.log(res);
//   },
//   error : function (err) {
//     console.log(err);
//   }
// })
// // 简写 get请求
// $.get("./cs.json",function (res) {
//   console.log(res);
// })




  </script>
</body>
</html>